<template>
    <page-layout>
        <template v-slot:header>
            <el-button size="small" type='primary' @click="saveEvt">保存</el-button>
            <el-button size="small" @click="backEvt">返回</el-button>
        </template>
        <el-form :model="page"
            :rules="rules"
            ref="ruleForm"
            size="small"
            label-width="100px">
            <el-row>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="礼品名字" prop="name">
                        <el-input v-model="page.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="产品名称" prop="product_name">
                        <el-input v-model="page.product_name" placeholder="选择产品名字" style="width: 100%;">
                            <el-button slot="append" class="sousuo" type="primary" @click="serchEvt" icon="el-icon-search"></el-button>
                        </el-input>
                        <!-- <el-button class="sousuo" type="primary" @click="serchEvt" icon="el-icon-search"></el-button> -->
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="成本价" prop="pure_price">
                        <el-input v-model="page.pure_price" type='number'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="定价" prop="price">
                        <el-input v-model="page.price" type='number'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="优惠" prop="discount">
                        <el-input v-model="page.discount" type='number'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="限购" prop="limit">
                        <el-input v-model="page.limit" type='number'></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="上架时间" prop="sale_stime">
                        <el-date-picker v-model="page.sale_stime"
                            type="date"
                            placeholder="选择上架日期"/>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="下架时间" prop="sale_etime">
                        <el-date-picker v-model="page.sale_etime"
                            type="date"
                            placeholder="选择下架日期"/>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="类型" prop="type">
                        <el-select disabled v-model="page.type" placeholder="请选择">
                            <el-option v-for="item in options.type"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="单位" prop="unit">
                        <el-select v-model="page.unit" placeholder="请选择">
                            <el-option v-for="item in options.unit"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="品级" prop="level">
                        <el-select v-model="page.level" placeholder="请选择">
                            <el-option v-for="item in options.level"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="产地" prop="place">
                        <el-input v-model="page.place"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <el-form-item label="品牌" prop="brand">
                        <el-input v-model="page.brand"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="详情" prop="detail">
                        <el-tag style="margin: 0 10px 10px 0;"
                            v-for="tag in arr1"
                            :key="tag"
                            @close="closeEvt(tag, 'detail')"
                            closable>
                            {{tag}}
                        </el-tag>
                        <el-button size="small" @click="filePickEvt('detail')" icon='el-icon-upload2'/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="banner" prop="banner">
                        <el-tag style="margin: 0 10px 10px 0;"
                            v-for="tag in arr2"
                            :key="tag"
                            @close="closeEvt(tag, 'banner')"
                            closable>
                            {{tag}}
                        </el-tag>
                        <el-button size="small" @click="filePickEvt('banner')" icon='el-icon-upload2'/>
                    </el-form-item>
                </el-col>
                <el-col :xs="24">
                    <el-form-item label="备注" prop="remark" style="width: 100%;">
                        <el-input type="textarea" placeholder="请输入备注内容" :rows="2" v-model="page.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <giftPicker v-model="show" @giftSelect="giftSelect"/>
        </el-form>
    </page-layout>
</template>

<script>
import { giftUpdateApi } from '@/apis/giftApi'
import { dictListApi, fileUploadApi } from '@/apis/productApi'
import { filePicker } from '@/util'
import giftPicker from './giftPicker.vue'
export default {
    components: {giftPicker},
    data() {
        return {
            arr1: [],
            arr2: [],
            page: {
                "name": "",
                "product_name": "",
                "pure_price": 0,
                "price": 0,
                "discount": 0,
                "limit": 0,
                "sale_stime": "",
                "sale_etime": "",
                "type": "",
                "unit": "",
                "level": "",
                "place": "",
                "brand": "",
                "detail": [],
                "banner": [],
                "remark": ""
            },
            rules: {
                name: [
                    {required: true, message: '礼品名字必须输入'}
                ],
                pure_price: [
                    {required: true, message: '成本价必须输入'},
                    {
                        validator: (_, value, callback) => {
                            if (value * 1 >= this.page.price * 1) {
                                callback(new Error('成本价不能高于定价'))
                            } else {
                                callback()
                            }
                        }
                    }
                ],
                price: [
                    {required: true, message: '定价必须输入'},
                    {
                        validator: (_, value, callback) => {
                            if (value * 1 <= this.page.pure_price * 1) {
                                callback(new Error('定价不能低于成本价'))
                            } else {
                                callback()
                            }
                        }
                    }
                ],
                discount: [
                    {required: true, message: '优惠价格必须数据'}
                ],
                limit: [
                    {required: true, message: '限购数量必须输入'}
                ],
                type: [
                    {required: true, message: '类型必须输入'}
                ],
                unit: [
                    {required: true, message: '单位必须输入'}
                ],
                level: [
                    {required: true, message: '品级必须输入'}
                ],
                place: [
                    {required: true, message: '产地必须输入'}
                ],
                brand: [
                    {required: true, message: '品牌必须输入'}
                ]
            },
            show: false,
            options: {
                level: [],
                unit: [],
                type: []
            }
        }
    },
    mounted() {
        Promise.all([
            dictListApi('UNITS'),
            dictListApi('MEDICAL'),
            dictListApi('PRODUCT_LEVEL')
        ]).then(([unit, type, level]) => {
            if (unit.code === 200) this.options.unit = unit.data.rows
            if (type.code === 200) this.options.type = type.data.rows
            if (level.code === 200) this.options.level = level.data.rows
        })
    },

    methods: {
        serchEvt() {
            this.show = true
        },
        giftSelect(list) {
            this.page = list
            this.arr1 = [this.page.detail]
            this.arr2 = [this.page.banner]
        },
        saveEvt() {
            this.$refs.ruleForm.validate().then(() => {
                giftUpdateApi(this.page).then(d => {
                    this.$message({
                        message: '保存成功',
                        type: 'success'
                    })
                    this.$router.push('/product/gift/list')
                })
            }).catch(() => {
                console.log('---------------------- 校验失败')
            })
        },
        backEvt() {
            this.$router.back()
        },
        filePickEvt(type) {
            filePicker(files => {
                let formData = new FormData()
                Array(files.length).fill().forEach((_, i) => {
                    formData.append('file', files[i])
                })
                fileUploadApi('gift_' + type, formData).then(d => {
                    if (d.code === 200) {
                        this.page[type] = this.page[type].concat(
                            d.data.map(it => it.path)
                        ),
                        this.arr1 = [this.page[type]]
                        // this.arr2 = [this.page[type]]
                    }
                })
            })
        },
        closeEvt(tag, type) {
            this.page[type].splice(this.page[type].findIndex(it => it === tag), 1);
        }
    }
}
</script>

<style>
    .serchBtn {
        width: auto;
        float: right;
    }
</style>